<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="牌阵"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-20">
					<view class="box-supplement pb-20 mb-20">
						<view class="title flex justify-center items-center">
							<text>您的问题为</text>
						</view>
						<view>
							<uni-easyinput class="bg-white pl-20" type="textarea" v-model="postFrom.describe" :inputBorder="false"
								placeholder="我最近总是觉得做什么都没干劲总觉得自己很无能，想知道自己是不是抑郁了."></uni-easyinput>
						</view>
					</view>
					<view class="box-supplement mb-20">
						<view class="title flex justify-center items-center">
							<text>您选择的卡牌</text>
						</view>
						<view class="box-card">
							<spread1 v-if="deckDetails.signame == 'type9'" />
							<spread2 v-if="deckDetails.signame == 'type10'" />
							<spread3 v-if="deckDetails.signame == 'type11'" />
							<spread4 v-if="deckDetails.signame == 'type12'" />
							<spread5 v-if="deckDetails.signame == 'type1'" />
							<spread6 v-if="deckDetails.signame == 'type2'" />
							<spread7 v-if="deckDetails.signame == 'type3'" />
							<spread8 v-if="deckDetails.signame == 'type4'" />
							<spread9 v-if="deckDetails.signame == 'type5'" />
							<spread10 v-if="deckDetails.signame == 'type6'" />
							<spread11 v-if="deckDetails.signame == 'type13'" />
							<spread12 v-if="deckDetails.signame == 'type14'" />
							<spread13 v-if="deckDetails.signame == 'type15'" />
							<spread14 v-if="deckDetails.signame == 'type16'" />
							<spread15 v-if="deckDetails.signame == 'type7'" />
							<spread16 v-if="deckDetails.signame == 'type8'" />
						</view>
						<view class="tips-show flex justify-center items-center">
							<ImageBoxVue src="/static/icons/round.png" width="32rpx" height="32rpx"></ImageBoxVue>
							<text>支付后可见</text>
							<ImageBoxVue src="/static/icons/round.png" width="32rpx" height="32rpx"></ImageBoxVue>
						</view>
					</view>
					<view class="box-supplement mb-20">
						<view class="title flex justify-center items-center">
							<text>您的基本信息为</text>
						</view>
						<view class="contents flex flex-wrap">
							<view class="year mr-20 mb-10">公元 {{year}} 年出生</view>
							<view class="zodiac mr-20 mb-10">{{zodiac}}</view>
							<view class="gender mr-20 mb-10">{{gender}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="py-30">
			<view class="btn-pay flex justify-center">
				<view class="btn_pay_red flex justify-center items-center" @click="onPlay(1)">
					<text>确定支付</text>
					<view class="pay-num flex items-center">
						<ImageBoxVue src="/static/icons/red.png" width="28rpx" height="28rpx"></ImageBoxVue>
						<text>{{redPrice}}钻</text>
					</view>
					<text>解读</text>
				</view>
			</view>
			<view class="btn-pay flex justify-center mt-30">
				<view class="btn_pay_blue flex justify-center items-center" @click="onPlay(0)">
					<text>确定支付</text>
					<view class="pay-num flex items-center">
						<ImageBoxVue src="/static/icons/blue.png" width="28rpx" height="28rpx"></ImageBoxVue>
						<text>{{bluePrice}}钻</text>
					</view>
					<text>解读</text>
				</view>
			</view>
		</view>
		<payPopupVue v-model="popupShow" :payType="payType" :allPrice="payPrice" @pay="onPlay(payType)"></payPopupVue>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed,
		provide,
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import radioCompVue from '@/components/radioComp.vue';
	import sendSettingVue from "./components/sendSetting.vue"
	import AgreementPlatformVue from '../login/components/AgreementPlatform.vue';
	import communityApi from '@/apis/apiList/communityApi';
	import indexApi from '@/apis/apiList/indexApi.js';
	import testApi from '@/apis/apiList/testApi';
	import payPopupVue from '@/components/payPopup.vue';

	import spread1 from './spread/spread1.vue';
	import spread2 from './spread/spread2.vue';
	import spread3 from './spread/spread3.vue';
	import spread4 from './spread/spread4.vue';
	import spread5 from './spread/spread5.vue';
	import spread6 from './spread/spread6.vue';
	import spread7 from './spread/spread7.vue';
	import spread8 from './spread/spread8.vue';
	import spread9 from './spread/spread9.vue';
	import spread10 from './spread/spread10.vue';
	import spread11 from './spread/spread11.vue';
	import spread12 from './spread/spread12.vue';
	import spread13 from './spread/spread13.vue';
	import spread14 from './spread/spread14.vue';
	import spread15 from './spread/spread15.vue';
	import spread16 from './spread/spread16.vue';

	const typeList = ref([])
	const posts = ref("") // 板块類型
	const bbsplateId = ref("") // 板块Id
	const bbsplate = ref({}) // 板块信息
	const postFrom = ref({
		paysts: 0, //支付方式
		// replenishment: "", // 补充说明
		sinpay: "", //支付金额
		prv: 1, //私有
		pret: 1, //解读人数
		sec: 0, //保密
		exp: 0, //游客讲解 
		obs: 0, //评论
		sdes: 1, // 是否有牌阵信息，0否 1是
		describe: "", //描述
		selcard: 0, // 
		ppst: 2, // 帖子类型 0 普通贴 1定向贴 2 快速贴
		posts: 3,
		exmk: 2
	})
	const selcard = ref("1,3,5") // 星图档案ID字符串
	const starsts = ref("") // 单人星图/双人星图
	const systemSetting = ref([]) // 系统设置列表
	const isAgree = ref(false)
	const items = ref([])
	const pickerRef = ref(null)
	const deckId = ref("")
	const addparme = ref([]) // 不适感
	const supplement = ref(false) // 补充信息
	const tarotId = ref("") // 选牌记录ID
	systemSetting.value = uni.getStorageSync('dict');

	const year = ref(2000)
	const yearIdx = ref([60])
	const gender = ref("女")
	const genderIdx = ref([1])
	const zodiac = ref("马")
	const zodiacIdx = ref([6])
	const yearList = ref([])

	const cardList = ref([])
	const payType = ref(0)

	const zodiacList = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪']
	const genderList = ['男', '女']

	const redPrice = ref(0)
	const bluePrice = ref(0)
	const showFlag = ref(true)
	const deckDetails = ref({})
	const popupShow = ref(null)

	provide('cardList', cardList)
	provide('showFlag', showFlag)

	const payPrice = computed(() => {
		if (payType.value == 1) {
			return redPrice.value
		} else if (payType.value == 0) {
			return bluePrice.value
		} else {
			return 0
		}
	})

	onLoad((option) => {
		postFrom.value.describe = option.ask
		// bbsplateId.value = option.bbsplateId
		posts.value = option.posts
		bluePrice.value = option.blue
		redPrice.value = option.red
		deckId.value = option.deckId
		for (let i = 1940; i <= 2007; i++) {
			yearList.value.push(i)
		}
		year.value = option.year
		gender.value = option.gender
		zodiac.value = option.zodiac
		tarotId.value = option.id
		getDeckDetail()
		getCardDetail()
	})

	const getCardDetail = async () => {
		const opt = {
			"id": tarotId.value
		}
		await communityApi.membergetDrawCardsByid(opt).then(res => {
			cardList.value = res.data.cardlist
		})
	}

	const getDeckDetail = () => {
		const opt = {
			"id": deckId.value
		}
		testApi.getDeckInfoByid(opt).then(res => {
			deckDetails.value = res.data
		})
	}

	const handleChoose = (item) => {
		if (addparme.value.indexOf(item.value) == -1) {
			addparme.value.push(item.value)
		} else {
			let idx = addparme.value.indexOf(item.value)
			addparme.value.splice(idx, 1)
		}
	}
	const handleNext = () => {
		uni.$on('chooseTarot', (obj) => {
			// console.log(obj)
		})
		uni.navigateTo({
			url: `/pages/test/tarot?id=1382936177731960832&dsts=1&ask=${postFrom.value.describe}&emit=chooseTarot`
		})
	}

	const bindYearChange = (e) => {
		yearIdx.value = e.detail.value
		year.value = yearList.value[yearIdx.value[0]]
	}
	const bindBirthdayChange = (e) => {
		zodiacIdx.value = e.detail.value
		zodiac.value = zodiacList[zodiacIdx.value[0]]
	}
	const bindGenderChange = (e) => {
		genderIdx.value = e.detail.value
		gender.value = genderList[genderIdx.value[0]]
	}
	const onPlay = (type) => {
		payType.value = type
		const params = {
			"member.id": uni.getStorageSync('user').id,
			"bbsplate.id": '1321849359872032768',
			...postFrom.value,
			paysts: type,
			selcard: selcard.value,
			problem: `${year.value},${zodiac.value},${gender.value}`,
			"deck.id": deckId.value,
			sinpay: type == 1 ? redPrice.value : bluePrice.value,
		}
		console.log(params)
		// popupShow.value = true
		// return
		communityApi.generatePoss(params).then(res => {
			if (res.code == 200) {
				uni.showToast({
					icon: "none",
					title: '测试成功'
				})
				setTimeout(() => {
					uni.switchTab({
						url: `/pages/tabbar/user`
					})
				}, 1000)
			} else {
				popupShow.value = true
			}
		})
	}
	const onchange = (e) => {
		const value = e.detail.value
		// console.log(e.detail.value)
		deckId.value = value[2].value
		postFrom.value['deck.id'] = deckId.value
		// console.log(postFrom.value)
		uni.$on('chooseTarot', (obj) => {
			// console.log(obj)
		})
		uni.navigateTo({
			url: `/pages/test/tarot?id=${deckId.value}&dsts=1&ask=${postFrom.value.describe}&emit=chooseTarot`
		})
	}
	const handleChooseStart = () => {
		uni.$once('choose', (chooses) => {
			console.log(chooses)
			postFrom.value.selcard = chooses.join(',')
			postFrom.value.starsts = chooses.length == 2 ? 1 : 0
			console.log(postFrom.value)
		})
		uni.navigateTo({
			url: `/pages/views/starChart`
		})
	}
	const setbBsplateId = (val) => {
		bbsplateId.value = val.id
		bbsplate.value = val
		if (val.btp == 1) {
			// 心理专区
			posts.value = 1
		}
		if (val.btp == 2) {
			// 星图区
			posts.value = 2
		}
		if (val.btp == 3) {
			// 卡牌区
			posts.value = 3
			pickerRef.value.show()
		}
	}
</script>

<style lang="scss" scoped>
	.box-problem {
		background: linear-gradient(180deg, #D3EFFF 0%, #DDF2FF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		// border: 2rpx solid;
		// border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;

		.bg_part {
			background: url(/static/test/bg_part.png) left top no-repeat;
			background-size: contain;
		}

		.bg_content {
			background: rgba(255, 255, 255, 0.4);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 32rpx;

			.text-checkbox {
				font-weight: 400;
				font-size: 26rpx;
				color: #273A3F;
				line-height: 36rpx;
			}
		}

		.desc {
			color: #B7CDDB;
		}
	}

	.box-supplement {
		background: linear-gradient(180deg, #E9F6FF 0%, #FFFFFF 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		overflow: hidden;

		.title {
			position: relative;
			height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #1B2043;
			line-height: 56rpx;
			background: url(/static/test/bg_title.png) no-repeat;
			background-size: cover;

			.box-choose {
				position: absolute;
				top: 26rpx;
				right: 40rpx;
			}
		}

		.box-desc {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 56rpx;
			padding: 28rpx 40rpx;
		}

		.contents {
			// opacity: 0.26;
			font-weight: 500;
			font-size: 28rpx;
			color: #324869;
			line-height: 56rpx;
			padding: 36rpx 40rpx;

			.year {
				background: linear-gradient(90deg, rgba(204, 204, 255, 0.26) 0%, rgba(117, 185, 255, 0.4) 100%);
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				color: #324869;
				padding: 14rpx 22rpx;
			}

			.zodiac {
				background: linear-gradient(90deg, rgba(159, 166, 255, 0.26) 0%, rgba(181, 117, 255, 0.4) 100%);
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				color: #362758;
				padding: 14rpx 22rpx;
			}

			.gender {
				background: linear-gradient(90deg, rgba(255, 190, 190, 0.26) 0%, rgba(255, 117, 181, 0.4) 100%);
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				color: #572242;
				padding: 14rpx 22rpx;
			}
		}

		.tips-show {
			height: 52rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #1B2043;
			line-height: 52rpx;
			background: url(/static/test/bg_pay.png) no-repeat;
			background-size: cover;

			text {
				margin: 0 8rpx;
			}
		}

		.box-card {
			padding: 20rpx;

			image {
				width: 160rpx;
			}

			.card {
				margin-left: 60rpx;
			}
		}
	}

	.box-tips {
		background: url(/static/test/bg_tips2.png) no-repeat;
		background-size: cover;
		height: 574rpx;
		padding: 40rpx 66rpx 0;
		font-weight: 400;
		font-size: 32rpx;
		color: #A9C686;
		line-height: 56rpx;
	}

	.box-module {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.picker-view {
			width: 96rpx;
			height: 140rpx;
		}

		.item {
			font-size: 24rpx;
			line-height: 58rpx;
			text-align: center;
		}

		.box-year {
			font-weight: 500;
			font-size: 24rpx;
			color: #4370C1;

			.label {
				background: #E3EDFF;
				// border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #B4CCF7;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				// border-radius: 8rpx;
				// border: 2rpx solid #B4CCF7;
			}

			.item {
				background: #E3EDFF;
				border: 2rpx solid #B4CCF7;
			}
		}

		.box-birthday {
			font-weight: 500;
			font-size: 30rpx;
			color: #634A97;

			.label {
				background: #F2ECFF;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #E2D4FF;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #E2D4FF;
			}

			.item {
				background: #F2ECFF;
				border: 2rpx solid #E2D4FF;
			}
		}

		.box-gender {
			font-weight: 500;
			font-size: 30rpx;
			color: #C3743B;

			.label {
				background: #FFE7D6;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #FFD8BB;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #FFD8BB;
			}

			.item {
				background: #FFE7D6;
				border: 2rpx solid #FFD8BB;
			}
		}
	}

	.btn-pay {
		.btn_pay_red {
			background: url('/static/test/btn_pay_red.png') no-repeat;
			background-size: cover;
			width: 690rpx;
			height: 80rpx;
		}

		.btn_pay_blue {
			background: url('/static/test/btn_pay_blue.png') no-repeat;
			background-size: cover;
			width: 690rpx;
			height: 80rpx;
		}

		text {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 28rpx;
		}

		.pay-num {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 12rpx;
			padding: 6rpx 10rpx;

			text {
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
				line-height: 22rpx;
				margin-left: 6rpx;
			}
		}
	}
</style>